<template>
    <div class="input-button">
        <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model.trim="inputValue"
            :maxlength="10"
            style="max-width: 150px"
            ref="saveTagInput"
            size="mini"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
        </el-input>
        <el-button type="text" v-else-if="type === 'button' && !inputVisible" size="small" @click="showInput">{{$t('public.add')}}
        </el-button>
        <div class="el-tag" @click="showInput" v-else-if="type === 'tag' && !inputVisible">{{tagName}}<i class="el-tag__close el-icon-close" @click.stop="close"></i></div>
    </div>
</template>
<script>
  // 组件说明 默认显示button or tag, 点击后变成input输入框，
  export default {
    props: {
      type: {type: String, default: 'tag'},
      tagName: {type: String, default: ''},
      edit: {type: Function, default: function () { return {} }}, // 编辑函数
      add: {type: Function, default: function () { return {} }},  // 添加函数
      close: {type: Function, default: function () { return {} }}
    },
    data () {
      return {
        inputVisible: false, // input显示隐藏
        inputValue: ''
      }
    },
    methods: {
      showInput () {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
          this.inputValue = this.tagName
        })
      },
      // input失去焦点
      handleInputConfirm () {
        let inputValue = this.inputValue
        this.inputVisible = false
        if (this.type === 'tag') {
          inputValue && this.edit(inputValue)
        } else {
          inputValue && this.add(inputValue)
          this.inputValue = ''
        }
      }
    }
  }
</script>
<style scoped lang='stylus'>
@import '../../../../../assets/common.styl'
.input-button
  display inline-block
  margin-right 20px
  margin-bottom 5px
.input-new-tag
  max-width 150px
.el-tag
  cursor pointer
  background-color $cf-white
  color $cf-gray5
  border 1px solid #DCDFE6
  .el-tag__close
    color $c-pink
    &:hover
      background-color $c-pink
      color $cf-white
</style>
